Разработка приложения Sushi App. Часть 1

➡️Ссылка на репозиторий с кодом этого урока (ветка main)

Навигация на экран с подробным описанием

При нажатии на карточку с товаром, открывается новый экран с подробным описанием.

Добавим новый маршрут в таблицу маршрутизации

Файл main.dart

import 'package:flutter/material.dart';

import 'screens/detail_roll_screen.dart';
import 'screens/main_screen.dart'; 
 
void main() => runApp(const RollApp());  

class RollApp extends StatelessWidget {  
  const RollApp({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: "Суши Shop", // Название приложения  
      theme: ThemeData(  
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), // Цвета  
      ), 
      debugShowCheckedModeBanner: false, 
      initialRoute: '/', // Экран который видно самым первым  
      routes: {  
        '/': (context) => MainScreen(), // Главный экран  
        '/detail': (context) => DetailRollScreen(), // Экран детального просмотра
      },  
    );  
  }  
}

                  

Для перехода на новый экран добавим маршрутизацию в файл roll_cart.dart и передадим данные через виджет

Файл roll_card.dart

import 'package:flutter/material.dart';  
  
import '../models/roll.dart';  
import '../screens/detail_roll_screen.dart';  
  
/// Виджет отображает информацию о ролле, переданной в параметре [roll].  
/// Он отображает имя, описание, URL-адрес изображения и цену ролла.  
///  
class RollCard extends StatelessWidget {  
  final Roll roll; // Данные о конкретном ролле
  
  const RollCard({super.key, required this.roll});  
  
  @override  
  Widget build(BuildContext context) {  
    return InkWell(  
      // При нажатии на карточку
      // перейти на экран '/detail' и передать данные о ролле
      onTap: () => Navigator.pushNamed(context, '/detail', arguments: roll),  
      child: Card(  
        color: Colors.white,  
        child: Padding(  
          padding: const EdgeInsets.all(8.0),  
          child: Column(  
            mainAxisSize: MainAxisSize.min,  
            crossAxisAlignment: CrossAxisAlignment.start,  
            children: [  
              Expanded(  
                child: ClipRRect(  
                  borderRadius: const BorderRadius.only(  
                    topLeft: Radius.circular(12),  
                    topRight: Radius.circular(12),  
                  ),  
                  child: Image.asset(  
                    roll.imageUrl,  
                    width: double.infinity,  
                    fit: BoxFit.cover,  
                  ),  
                ),  
              ),  
              Expanded(  
                child: ListTile(  
                  contentPadding: EdgeInsets.zero,  
                  title: Text(roll.name),  
                  subtitle: Text(  
                    roll.description,  
                    style: const TextStyle(fontSize: 10),  
                  ),  
                ),  
              ),  
              Row(  
                mainAxisAlignment: MainAxisAlignment.spaceBetween,  
                children: [  
                  Text("${roll.price} руб."),  
                  TextButton(  
                    onPressed: () {  
                      // Здесь можно добавить логику покупки  
                    },  
                    child: const Text("Купить"),  
                  ),  
                ],  
              ),  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}

                  

Добавим новый экран DetailRollScreen в папку screens

Файл detail_roll_screen.dart

import 'package:flutter/material.dart';  
import '../models/roll.dart';  
  
class DetailRollScreen extends StatelessWidget {  
  const DetailRollScreen({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
  
    // Поолучаем данные из прошлого экрана и сохраянем мх в переменной
    final roll = ModalRoute.of(context)!.settings.arguments as Roll;  
  
    return Scaffold(  
      appBar: AppBar(  
        title: Text(roll.name),  
      ),  
      body: SingleChildScrollView(  
        child: Padding(  
          padding: const EdgeInsets.all(16.0),  
          child: Column(  
            crossAxisAlignment: CrossAxisAlignment.start,  
            children: [  
              Center(  
                child: ClipRRect(  
                  borderRadius: BorderRadius.circular(12.0),  
                  child: Image.asset(  
                    roll.imageUrl,  
                    fit: BoxFit.cover,  
                  ),  
                ),  
              ),  
              const SizedBox(height: 20),  
              Text(  
                roll.name,  
                style: const TextStyle(  
                  fontSize: 24,  
                  fontWeight: FontWeight.bold,  
                ),  
              ),  
              const SizedBox(height: 10),  
              Text(  
                roll.fullDescription,  
                style: const TextStyle(fontSize: 16),  
              ),  
              const SizedBox(height: 10),  
              Text(  
                "Цена: ${roll.price} руб.",  
                style: const TextStyle(  
                  fontSize: 18,  
                  fontWeight: FontWeight.bold,  
                ),  
              ),  
              const SizedBox(height: 20),  
              Center(  
                child: ElevatedButton(  
                  onPressed: () { },  
                  child: const Text("Купить"),  
                ),  
              ),  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}